<!--
 * @Author: flechazo1 1932689495@qq.com
 * @Date: 2025-03-24 21:16:08
 * @LastEditors: flechazo1 1932689495@qq.com
 * @LastEditTime: 2025-04-05 23:46:23
 * @FilePath: \cms\src\components\SelectHuman.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- 选择员工 -->
        <el-table ref="myTable" :data="staffSelectStore.gridData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column property="id" label="序号" width="80" />
            <el-table-column property="name" label="员工姓名" width="90" />
            <el-table-column property="distance" label="与上一单距离" width="120" />
            <el-table-column label="距离详情">
                <template #default="scope">
                    <el-button 
                        type="success" 
                        size="small" 
                        :icon="MapLocation" 
                        @click="distanceDetail(scope.$index)"
                    />
                </template>
            </el-table-column>
        </el-table>
        
        <slot name="confirmButton"></slot>
    </div>
</template>

<script setup lang="ts">
import { MapLocation } from '@element-plus/icons-vue';
import { useStaffSelectStore } from '@/stores/useStaffSelectStore';
import { ref, onMounted, onUnmounted } from 'vue';

const staffSelectStore = useStaffSelectStore()
const myTable = ref(null)

defineOptions({
  name: 'SelectHuman'
})

let { distanceDetail, handleSelectionChange } = staffSelectStore

// 在组件挂载时将 myTable 赋值给 store
onMounted(() => {
  staffSelectStore.myTable = myTable.value
})

// 在组件卸载时清理状态
onUnmounted(() => {
  staffSelectStore.gridData = []
  staffSelectStore.location = []
  staffSelectStore.checkBox = []
  staffSelectStore.myTable = null
})

// 添加一个方法来重置表格选择
const resetTableSelection = () => {
  if (myTable.value) {
    (myTable.value as any).clearSelection()
  }
}

// 暴露方法给父组件
defineExpose({
  resetTableSelection
})
</script>

<style scoped>

</style>